<template>
  <el-descriptions
    :title="title"
    :column="column"
    :border="border"
    :labelStyle="{whiteSpace: 'nowrap', width: labelWidth}"
  >
    <el-descriptions-item
      v-for="item in columnConfig"
      :key="item.key"
      :label="item.label"
      :span="item.span || 2"
    >
      <template v-if="item.slot">
        <slot :name="item.slot" :item="item"/>
      </template>
      <template v-else>
        {{ item.value }}
      </template>
    </el-descriptions-item>
  </el-descriptions>
</template>

<script>
export default {
  name: "UDescriptionsList",
  props: {
    direction: {
      type: String,
      default: 'horizontal'
    },
    title: {
      type: String,
      default: ''
    },
    labelWidth: {
      type: String,
      default: '160px'
    },
    border: {
      type: Boolean,
      default: true
    },
    column: {
      type: Number,
      default: 2
    },
    columnConfig: {
      type: Array,
      default() {
        return []
      }
    },
    source: {
      type: Object,
      default() {
        return {}
      }
    }
  },

}
</script>

<style lang="scss" scoped>

</style>
